<template>
  <div>
    <!-- 顶部操作区域 -->
    <div
      style="
        margin-top: 15px;
        width: 300px;
        margin-left: 45px;
        margin-bottom: 15px;
      "
    >
      <el-input
        placeholder="请输入医生关键字"
        v-model="query"
        class="input-with-select"
        :clearable="true"
        @blur="reList()"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getDoctorByName()"
        ></el-button>
      </el-input>
    </div>
    <!-- <el-button
      type="primary"
      style="
        margin-right: 20px;
        float: right;
        margin-top: -55px;
        margin-bottom: 15px;
      "
      @click="insertCourier()"
      >添加医生</el-button
    > -->

    <!-- 表格部分 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="doctor_id"
        label="医生编号"
        width="100%"
        align="center"
      >
      </el-table-column>
      <el-table-column fixed prop="doctor_name" label="姓名" align="center">
      </el-table-column>
      <el-table-column
        fixed
        prop="doctor_gender"
        label="性别"
        width="100%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="years_of_experience"
        label="从业经验"
        width="100%"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.years_of_experience }}年
        </template>
      </el-table-column>

      <el-table-column fixed prop="expertise" label="专业主治" align="center">
      </el-table-column>
      <el-table-column
        prop="is_appointment_available"
        label="可预约"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.is_appointment_available === 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="is_employed" label="在职状态" width="100%" align="center">
  <template slot-scope="scope">
    <span :style="scope.row.is_employed === 1 ? { color: 'black' } : { color: 'red' }">{{ scope.row.is_employed === 1 ? '任职' : '离职' }}</span>
  </template>
</el-table-column>
      <el-table-column
        prop="contact_number"
        label="联系电话"
        width="200%"
        align="center"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="editClick(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button v-show="scope.row.is_employed === 1"  @click="deletClick(scope.row)" type="danger" size="small"
            >离职</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>

    <!-- 弹窗 -->
    <el-dialog
      :title="dialogVisibleFlag == 'insert' ? '新增用户' : '信息修改'"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="doctor_name">
          <el-input v-model="ruleForm.doctor_name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="doctor_gender" v-if="dialogVisibleFlag=='insert'">
          <el-select v-model="ruleForm.doctor_gender" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主治方向" prop="expertise">
          <el-input v-model="ruleForm.expertise"></el-input>
        </el-form-item>
        <el-form-item label="从业经验" prop="years_of_experience">
          <el-input v-model="ruleForm.years_of_experience"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contact_number">
          <el-input v-model="ruleForm.contact_number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="commitDoctor()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDoctors,
  addDoctor,
  delDoctor,
  updateDoctor,
  getDoctorByName,
} from "@/utils/request";
export default {
  name: "DyymanagevueDoctorManagementPage",

  data() {
    return {
      dialogVisible: false,
      dialogVisibleFlag: "",
      userTypeList: [],
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      totalItems: 0, // 总记录数
      query: "",
      ruleForm: {
        doctor_name: "",
        doctor_gender: "",
        expertise: "",
        years_of_experience:0,
        contact_number: "",
      },
      rules: {
        doctor_name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        expertise: [
          { required: true, message: "请输入主治方向", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "请输入主治方向，多个用'，'隔开'",
            trigger: "blur",
          },
        ],
        contact_number: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            pattern: /^1[345789]\d{9}/,
            message: "请输入正确的电话号码",
          },
        ],
      },
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      await getDoctors()
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    getDoctorByName() {
      console.log(this.input);
      if (this.query != "") {
        getDoctorByName(this.query)
          .then((res) => {
            this.tableData = res.data.data;
          })
          .catch((err) => {});
      }
    },
    editClick(row) {
      this.dialogVisible = true;
      this.dialogVisibleFlag = "edit";
      let doctor = {
        doctor_id: row.doctor_id,
        doctor_name: row.doctor_name,
        doctor_gender:row.doctor_gender,
        expertise: row.expertise,
        years_of_experience: row.years_of_experience,
        contact_number: row.contact_number,
      };
      this.ruleForm = doctor;
      console.log(this.ruleForm)
    },
    deletClick(row) {
      this.$confirm("离职操作不可逆，请谨慎操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delDoctor(row.doctor_id)
          .then((res) => {
            if (res.data.status == true) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }

            this.getList();
          })
          .catch((err) => {
            console.error(err);
          });
      });
    },
    insertCourier() {
      this.ruleForm = {
        doctor_name: "",
        doctor_gender: "",
        expertise: "",
        years_of_experience:0,
        contact_number: "",
      };
      this.dialogVisible = true;
      this.dialogVisibleFlag = "insert";
    },
    handleClose() {
      this.dialogVisible = false;
    },
    commitDoctor() {
      //关闭弹窗
      this.dialogVisible = false;
      //封装用户信息
      if (
        this.ruleForm.doctor_name == "" ||
        this.ruleForm.doctor_gender == "" ||
        this.ruleForm.expertise == "" ||
        this.ruleForm.years_of_experience == 0 ||
        this.ruleForm.contact_number == ""
      ) {
        return;
      } else {
        let doctor = this.ruleForm;
        //提交入职信息
        if (this.dialogVisibleFlag == "insert") {
          addDoctor(doctor)
            .then((res) => {
              if (res.data.status) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.getList();
                this.ruleForm = {
                  doctor_name: "",
                  doctor_gender: "",
                  expertise: "",
                  years_of_experience:0,
                  contact_number: "",
                };
              } else {
                this.$message({
                  type: "failer",
                  message: "添加失败!",
                });
              }
            })
            .catch((err) => {
              console.error(err);
            });
        } else if (this.dialogVisibleFlag == "edit") {
          let doctor = this.ruleForm;
          updateDoctor(doctor)
            .then((res) => {
              if (res.data.status) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getList();
                this.ruleForm = {
                  doctor_name: "",
                  doctor_gender: "男",
                  expertise: "",
                  years_of_experience: 0,
                  contact_number: "",
                };
              } else {
                this.$message({
                  type: "failer",
                  message: "修改失败!",
                });
              }
            })
            .catch((err) => {
              console.error(err);
            });
        }
      }
    },
    reList() {
      if (this.query == "") {
        console.log("redo");
        this.getList();
      }
    },
    // 分页器页码变化事件处理函数
    handleCurrentChange(newPage) {
      this.currentPage = newPage; // 更新当前页码
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize; //更新每页数据条数
    },
  },
};
</script>

</script>
<style scoped>
.el-pagination {
  position: absolute;
  bottom: 0;
  left: 45%;
  /* width: 30%; */
  bottom: 5%;
  background-color: #fff;
  z-index: 999; /* 可以根据需要设置z-index值，确保分页器显示在其他内容上方 */
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果（可选） */
}
</style>